<template>
  <el-container>
    <el-header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>研究方向管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="10">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
          >
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-link type="primary" target="_blank" @click="addDirection">
            <span style="display: flex;left: 0;margin-top: 10px">新增方向</span>
          </el-link>
        </el-col>
      </el-row>
      <div class="custom-tree-container">
        <div class="tree-container tree-src">
          <el-tree
            :lazy="true"
            :load="loadNodes"
            :data="optionData"
            :props="props"
            class="tree tree-dis"
            :node-key="props.value"
            :filter-node-method="filterNode"
            default-expand-all
            :expand-on-click-node="false"
            ref="directionTree"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ data.name }}</span>
              <span>
                <el-button
                  type="text"
                  size="mini"
                  v-if="data.directionId!==0"
                  @click="() => edit(data)">
                  编辑名称
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  v-if="node.level===1"
                  @click="() => removeDirection(node, data)">删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <add-direction-form ref="addForm" @done="reshow"></add-direction-form>
      <el-dialog title="编辑研究方向"
                 :visible.sync="editVisible"
                 @close="clear"
                 ref="dialog"
                 width="30%">
        <el-input v-model="editName" placeholder="请输入研究方向名称 "></el-input>
        <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="editDirection">确定</el-button>
          <el-button @click="clear">取消</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import AddDirectionForm from "./AddDirectionForm";

export default {
  name: "ManageDirection",
  inject: ['reload'],
  components: {AddDirectionForm},
  data() {
    return {
      /*
        研究方向对象
       */
      directions: [],
      //节点过滤文本
      filterText: '',
      /*
        研究方向节点属性
       */
      props: {
        value: 'id',
        label: 'name',
        pid: 'parentId',
        children: 'children',
        isLeaf: 'leaf'
      },

      //编辑表单
      editVisible: false,
      editId: -1,
      parentId:-1,
      editName: '',
    }
  },

  methods: {

    loadNodes(node, resolve) {
      let self = this
      let treeData = []
      if (node.level === 0) {
        self.$axios.get(`/direction/getChildren/0`).then(res => {
          res.data.data.forEach(e => {
            e.id = e.directionId
            treeData.push(e)
          })
          resolve(treeData)
        }).catch(() => {
          resolve([])
        })
      } else {
        self.$axios.get(`/direction/getChildren/${node.data.id}`).then(res => {
          res.data.data.forEach(e => {
            e.id = e.directionId
            treeData.push(e)
          })
          resolve(treeData)
        }).catch(() => {
          resolve([])
        })
      }
    },

    /*
      打开新添表格
    */
    addDirection() {
      this.$refs.addForm.dialogFormVisible = true
    },
    /*
      删除节点
     */
    removeDirection(node, data) {
      this.$axios.get(`/direction/delete/${data.directionId}`).then(() => {
        this.$message.success('删除成功')
        this.reload()
      }).catch(failRes => {
        console.log(failRes)
      })
    },

    /*
      编辑节点
     */
    edit(data) {
      this.editName = data.name
      this.editId = data.directionId
      this.parentId=data.paperId
      this.editVisible = true
    },
    /*

     */
    editDirection(){
      if(this.editName===''||this.editId===undefined||this.editId===-1){
        this.$message.error('修改错误，请检查选择的方向是否存在')
        return
      }
      this.$axios.post('/direction/update',{
        directionId:this.editId,
        parentId:this.parentId,
        name:this.editName
      }).then(res=>{
        console.log(res.data.data)
        this.$message.success('修改成功')
        this.reload()
      }).catch(failRes=>console.log(failRes))
    },
    /*
      清空表单
     */
    clear() {
      this.editVisible= false
      this.editId= -1
      this.editName=''
    },
    /*
      调试节点
     */
    handleNodeClick(data) {
      console.log(data);
    },

    /*
      过滤节点
     */
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },

    reshow() {
      this.reload()
    }
  },
  /*
    节点过滤
   */
  watch: {
    filterText(val) {
      this.$refs.directionTree.filter(val)
    }
  },

  computed: {
    /*
      遍历selectList的所有选项，然后将所有的子元素挂载在父元素之下，
      然后返回前一层
     */
    optionData() {
      let cloneData = JSON.parse(JSON.stringify(this.directions))
      return cloneData.filter(father => {
        let branchArr = cloneData.filter(child => father.id === child.parentId); // 返回每一项的子级数组
        branchArr.length > 0 ? (father.children = branchArr) : ""; //给父级添加一个children属性，并赋值
        return father.parentId === 0; //返回第一层
      })
    }
  },
}
</script>

<style scoped>
/*/deep/ .el-input {*/
/*  width: 50%;*/
/*  display: flex;*/
/*  left: 5%;*/
/*}*/

.custom-tree-container {
  margin-top: 3%;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: x-large;
  padding-right: 30%;
}

.tree /deep/ .el-tree-node {
  position: relative;
  padding-left: 16px;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}
<style scoped>

 .tree /deep/ .el-tree-node {
   position: relative;
   padding-left: 16px;
 }

.tree /deep/ .el-tree-node__children {
  padding-left: 16px;
}

.tree /deep/ .el-tree-node :last-child:before {
  height: 38px;
}

.tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree /deep/ .el-tree-node:before {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree /deep/ .el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree /deep/ .el-tree-node:before {
  border-left: 1px dashed #4386c6;//指示线的样式和颜色粗细
bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.tree /deep/ .el-tree-node:after {
  border-top: 1px dashed #4386c6; //指示线的样式和颜色粗细
height: 20px;
  top: 12px;
  width: 24px;
}

</style>
